<template>
    <view class="info_container">
        <view class="info">
            <view class="info_l">
                <image class="avatar" :src="state.avatar" />
            </view>
            <view class="info_r">
                <view class="info_r_t">
                    <view class="name">{{ state.nickname }}</view>
                    <view class="level">{{ state.levelName }}</view>
                </view>
                <!-- 非最高等级 -->
                <view v-if="!state.highLevel" class="info_r_b">
                    <!-- 等级小于一级 -->
                    <template v-if="!state.levelName"> - </template>

                    <template v-else>
                        <template v-if="state.nextLevelObj.addToPlug && state.shortAddToPlug?.value > 0"
                            >推广金额还差<text class="price">￥{{ state.shortAddToPlug }}</text
                            >,
                        </template>
                        <template v-else-if="state.nextLevelObj.addToPlug && state.shortAddToPlug?.value <= 0"
                            >累计推广金额<text class="price">已达标</text>,
                        </template>
                        <template v-if="state.nextLevelObj.bindFansNum && state.shortFans > 0"
                            >粉丝还差<text class="price">{{ state.shortFans }}</text
                            >个,
                        </template>
                        <template v-else-if="state.nextLevelObj.bindFansNum && state.shortFans <= 0"
                            >累计绑定粉丝<text class="price">已达标</text>,
                        </template>
                        <template v-if="state.nextLevelObj.inviteDtbNum && state.shortInviteDtb > 0"
                            >邀请分销员还差<text class="price">{{ state.shortInviteDtb }}</text
                            >个,
                        </template>
                        <template v-else-if="state.nextLevelObj.inviteDtbNum && state.shortInviteDtb <= 0"
                            >累计邀请分销员<text class="price">已达标</text>,
                        </template>
                        即可升级到<text class="price">{{ state.nextLevelName }}</text>
                    </template>
                </view>
                <view v-else class="info_r_b"> 您已升至最高级 </view>
            </view>
        </view>
        <view class="award">
            <view class="award_l">
                <view class="award_l_t">{{ state.plugScale }}%</view>
                <view class="award_l_b">推广奖励</view>
            </view>
            <template v-if="state.inviteSwitch">
                <view class="line"></view>
                <view class="award_r">
                    <view class="award_r_t">{{ state.inviteScale }}%</view>
                    <view class="award_r_b"
                        >邀请奖励 <view class="query_icon">?<view @click="onOpenPopup" class="icon_btn"></view></view>
                    </view>
                </view>
            </template>
        </view>
        <view class="desc"> 此处为默认的奖励规则，部分商品的奖励比例会不同，具体以实际情况为准。</view>
    </view>
    <Popup v-model="showPopup" />
</template>

<script setup>
import Popup from './popup.vue';
import { ref, reactive, watch } from 'vue';

const props = defineProps({
    data: { type: Object, default: () => ({}) }
});

const state = reactive({});
const showPopup = ref(false);
const onOpenPopup = () => {
    showPopup.value = true;
};
watch(
    () => props.data,
    v => Object.assign(state, v),
    { immediate: true }
);
</script>

<style lang="scss" scoped>
.info_container {
    padding: 29rpx;
    padding-bottom: 16rpx;
    margin-bottom: 18rpx;
    background: linear-gradient(136deg, #fff9ec 0%, #ffeec8 100%);
}
.price {
    color: #fe292b;
}
.info {
    display: flex;
    margin-bottom: 29rpx;
    .info_l {
        margin-right: 25rpx;
        .avatar {
            width: 101rpx;
            height: 101rpx;
            border-radius: 50%;
        }
    }
    .info_r {
        padding-top: 9rpx;
        .info_r_t {
            display: flex;
            align-items: center;
            margin-bottom: 16rpx;
            .name {
                margin-right: 18rpx;
                font-size: 31rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #ac5115;
                line-height: 31rpx;
            }
            .level {
                height: 36rpx;
                padding: 0 16rpx;
                background: #36302c;
                border-radius: 18rpx;
                font-size: 22rpx;
                line-height: 36rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #fff0d6;
            }
        }
        .info_r_b {
            font-size: 25rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ac5115;
        }
    }
}
.award {
    padding: 25rpx 0;
    margin-bottom: 18rpx;
    border-radius: 7rpx;
    display: flex;
    align-items: center;
    background: #b17d44;
    color: #fff;
    opacity: 0.35;
    .award_l {
        flex: 1;
        .award_l_t {
            text-align: center;
            margin-bottom: 24rpx;
            font-size: 31rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
        }
        .award_l_b {
            text-align: center;
            font-size: 22rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
        }
    }
    .award_r {
        flex: 1;
        .award_r_t {
            text-align: center;
            margin-bottom: 24rpx;
            font-size: 31rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
        }
        .award_r_b {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            .query_icon {
                position: relative;
                width: 22rpx;
                height: 22rpx;
                margin-left: 7rpx;
                line-height: 22rpx;
                text-align: center;
                border-radius: 50%;
                background-color: #fff;
                color: #b17d44;
                .icon_btn {
                    position: absolute;
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }
    }
    .line {
        width: 2rpx;
        height: 47rpx;
        background: rgba(255, 255, 255, 0.51);
    }
}
.desc {
    font-size: 22rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 33rpx;
}
</style>
